<template>
  <div class="login-bg">
    <div class="login-wrapper">
      <div class="login-box">
        <div class="form-box">
          <div style="display: flex;justify-content: center;">
            <h1 class="title">校卫管理系统</h1>
          </div>
          <div style="display: flex;justify-content: center;">
            <div class="form-box-item">
              <!--            <div class="row-line" />-->
              <el-form ref="loginForm" label-position="left" class="form" label-width="100px" :model="loginForm" :rules="loginRules">
                    <el-form-item label="账号" prop="phone">
                        <el-input
                          v-model="loginForm.phone"
                          placeholder="请输入登录账号"
                          autocomplete="off"
                        />
                    </el-form-item>
                  <el-col :span="24" style="margin-top: 5%;">
                    <el-form-item label="密码" prop="password">
                        <el-input
                          v-model="loginForm.password"
                          type="password"
                          placeholder="请输入您的密码"
                          show-password
                          @keyup.enter.native="handleLogin"
                        />
                    </el-form-item>
                  </el-col>
                <el-row style="margin-top: 10%;">
                  <el-col :span="24">
                    <el-button
                      :disabled="loading"
                      type="primary"
                      class="submit-button"
                      @click.native.prevent="handleLogin"
                    >{{ loading ? '登录中...' : '登录' }}</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!--        <div class="poistion-bg" />-->
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import { title } from '@/settings'
import { post } from '@/utils/request'

export default {
  name: 'Login',
  data() {
    return {
      title,
      loginForm: {
        phone: '',
        password: ''
      },
      loginRules: {
        phone: [
          { required: true, trigger: 'blur', message: '请输入登录账号' }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      captchaInfo: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const loginForm = JSON.parse(JSON.stringify(this.loginForm))
          loginForm.password = md5(loginForm.password)
          loginForm.account_type = 'tel_password'
          this.loading = true
          post('api/adminPortal/accountLogin/login', loginForm).then((res) => {
            this.loading = false
            if (res.code === 200) {
              localStorage.setItem('userInfo', JSON.stringify(res.data))
              this.$store.dispatch('user/login', loginForm).then((res) => {
                this.$router.push('/')
              }).finally(() => { this.loading = false })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-bg {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    background-image: url('~@/assets/img/bg_yuansu@2x.png');
    background-size: 38% 100%;
    background-repeat: no-repeat;
    .login-wrapper {
      width: 40%;
      height: 60%;
      margin: 0 auto;
      .login-box {
        position: relative;
        height: 100%;
        padding: 12px 9px;
        .form-box {
          /*display: flex;*/
          /*flex-direction: column;*/
          justify-content: space-between;
          position: relative;
          width: 100%;
          height: 100%;
          background: #ffffff;
          box-shadow: 0px 0px 40px 0px rgba(49,59,211,0.14);
          border-radius: 35px;
          padding: 2% 8%;
          &-item {
            margin-top: 10%;
            /*display: flex;*/
            /*flex-direction: column;*/
            height: 65vh;
            width: 70%;
            .row-line {
              width: 50px;
              height: 4px;
              background: #2f3ced;
              border-radius: 2px;
            }
            .title {
              margin: 0;
              padding: 0;
              margin-top: 6%;
              font-size: 30px;
              font-family: PingFang SC Bold, PingFang SC Bold-Bold;
              font-weight: 700;
              text-align: left;
              color: #333333;
            }
            .title-tip {
              margin-top: 1%;
              font-size: 14px;
              font-family: PingFang SC Bold, PingFang SC Bold-Bold;
              font-weight: 700;
              text-align: left;
              color: #999999;
            }
            .form {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex: 1;
              margin-top: 6%;
              width: 100%;
              .is-required {
                ::v-deep .el-form-item__label {
                  &::before {
                    content: '';
                  }
                }
              }
              ::v-deep .el-form-item__label {
                font-size: 14px;
                font-family: PingFang SC Bold, PingFang SC Bold-Bold;
                font-weight: 700;
                text-align: left;
                color: #333333;
              }
              ::v-deep .el-form-item__content {
                .el-input {
                  height: 7%;
                  background: #ffffff;
                  border-radius: 5px;
                }
              }
              .submit-button {
                width: 100%;
                height: 7%;
                /*background: #2f3ced;*/
                border-radius: 5px;
                font-size: 14px;
                font-family: PingFang SC Regular, PingFang SC Regular-Regular;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }
        }
        .poistion-bg {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          width: 48.84%;
          height: 100%;
          background-image: url('~@/assets/img/img_denglu@2x.png');
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
